<template>
  <div class="go-items-list">
    <n-grid
        :x-gap="20"
        :y-gap="20"
        cols="2 s:2 m:3 l:4 xl:4 xxl:4"
        responsive="screen"
    >
      <n-grid-item v-for="(item, index) in Projects" :key="item.Id">
        <project-items-card
            :cardData="item"
            @resize="resizeHandle"
            @delete="deleteHandle($event, index,deleteCallback)"
            @edit="editCallback"
            @released="releasedCallback"
            @refreshProject="refreshProjectCallback"
        ></project-items-card>
      </n-grid-item>
    </n-grid>
    <div class="list-pagination">
      <n-pagination
          :item-count="10"
          :page-sizes="[10, 20, 30, 40]"
          show-size-picker
      />
    </div>
  </div>
  <project-items-modal-card
      v-if="modalData"
      :modalShow="modalShow"
      :cardData="modalData"
      @close="closeModal"
      @edit="editHandle"
  ></project-items-modal-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ProjectItemsCard} from '../ProjectItemsCard/index'
import {ProjectItemsModalCard} from '../ProjectItemsModalCard/index'
import {icon} from '@/plugins'
import {useModalDataInit} from './hooks/useModal.hook'
import {useDataListInit} from './hooks/useData.hook'
// @ts-ignore
import UserPageApi from "@/api/flow/UserPageApi.js";
import {Chartype, HttpResultType} from "@/views/project/items";
import {userPageProject} from "@/store/modules/flow/userPageProject";
import {setSessionStorage} from "@/utils";
import {StorageEnum} from "@/enums/storageEnum";
import router from "@/router";
import {PreviewEnum} from "@/enums/pageEnum";

const PageProject = userPageProject()
const {CopyIcon, EllipsisHorizontalCircleSharpIcon} = icon.ionicons5
const {deleteHandle} = useDataListInit()
const {modalData, modalShow, closeModal, resizeHandle, editHandle} = useModalDataInit()
import {ElLoading} from 'element-plus'
import {Project} from "@/api/ProjectsApi";

const Projects = ref<Chartype[]>([])
onMounted(() => {
  LoadingProjects()
})

const LoadingProjects = () => {
  Project.Gets().then((res) => {
    Projects.value = res?.Data
    for (let _p of res?.Data) {
      if (_p.Released) {
        prod(_p)
        break
      }
    }
  });
}

const prod = (_Project: Chartype) => {
  Project.Get<HttpResultType>(_Project.Id).then(res => {
    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, JSON.parse(res.Data.Components))
    const loading = ElLoading.service({
      lock: true,
      text: '程序加载中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
      loading.close()
      router.push({
        path: PreviewEnum.CHART_PREVIEW.replace(':id(.*)*', _Project.Id as any),
      })
    }, 2000)
  });
}
const deleteCallback = () => {
  LoadingProjects()
}
const editCallback = (cardData: Chartype) => {
  PageProject.SetCurrentEditProject(cardData as { Id: '' })
  editHandle(cardData)
}

/**
 * 发布回调
 * @param cardData
 */
const releasedCallback = (cardData: Chartype) => {
  for (let project of Projects.value) {
    if (project.Id === cardData.Id) {
      project.Released = cardData.Released === 1 ? 0 : 1
    } else {
      project.Released = 0
    }
  }
}
const refreshProjectCallback = () => {
  LoadingProjects()
}
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include go('items-list') {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
  .list-content {
    position: relative;
    height: $contentHeight;
  }
  .list-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
